<!-- 登录组件, 普通登录 -->
<template>
<body id="poster">
  <div class="logintitle">
    <h1>物联网系统登录界面</h1>
  </div>
  <el-form class="logoform" >
    <div class="formtitle">用户登录</div>
    <el-form-item class="forminput user">
      <el-input v-model="form.username" placeholder="用户名" autofocus></el-input>
    </el-form-item>
    <el-form-item class="forminput password">
      <el-input  v-model="form.password" placeholder="密码" show-password></el-input>
    </el-form-item>
    <el-form-item class="forminput password">
      <el-input style="width:60%;"  v-model="form.checkCode" placeholder="验证码"></el-input>
      <el-image
      class="image"
      :src="url"
      :fit="fit" @click="changeCheckCode()">
        <div slot="error" class="image-slot" @click="changeCheckCode()">
          <i class="el-icon-picture-outline" @click="changeCheckCode()"></i>
        </div>
      </el-image>
    </el-form-item>
    <el-form-item class="formbtn">
      <el-button type="primary" class="loginBtn"  @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</body>
</template>
 
 
<script>
import Qs from 'qs'
import { mapMutations } from 'vuex';
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "admin",
        password: "111111",
        checkCode: ""
      },
      fit:"fill",
      url:"http://localhost:8888/user/checkcode"//验证码链接
    };
  },
  created: function() {
    this.changeCheckCode();
  },
  computed:{
    ...mapMutations("dataOptions",['setCurrentUser']),
  },
  methods: {
    changeCheckCode(){
      this.url = this.url+"?time="+new Date();
    },
    login: async function() {
      var that = this;
      if (that.form.username == "") {
        this.$message({
          showClose: true,
          message: '用户名不能为空',
          type: 'error'
        });
        return false;
      }
      if (that.form.password == "") {
        this.$message({
          showClose: true,
          message: '密码不能为空',
          type: 'error'
        });
        return false;
      }
      if (that.form.checkcode == "") {
        this.$message({
          showClose: true,
          message: '验证码不能为空',
          type: 'error'
        });
        return false;
      }
      //清除旧的token
       window.sessionStorage.removeItem("token");
        //用await简化，相邻方法用async修饰
      const res=await this.$http.post("user/login",Qs.stringify(this.form));
      if(res.data.code != 200){
        this.$message.error("登录失败" + res.data.msg);
        window.sessionStorage.removeItem("token");
      }else{
        localStorage.setItem("isLogin", 1)
        this.$message({
          message: '登录成功',
          type: 'success'
        });
        window.sessionStorage.setItem("token",res.headers.token);
        this.$router.replace('/main');
      }
    }
  }
};
</script>
 
<style scoded>
#poster {
  background: url("../assets/img/loginbg.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: fixed;
}
body {
  margin: 0px;
  padding: 0;
}

.logintitle {
  width: 90%;
  height: 75px;
  margin: 5% auto 0;
  line-height: 75px;
  font-family: "华文中宋";
  color: #abccf3;
  text-align: center;
}
.logintitle h1 {
  display: inline-block;
  text-align: center;
  font-size: 44px;
  background-image: linear-gradient(#8fefff, #1765ff);
  background-clip: text;
  margin: 0;
  margin-left: 10px;
  padding: 0;
}
.logoform {
  width: 460px;
  height: 680px;
  margin: 6% auto auto auto;
  position: relative;
  background: url("../assets/img/logintip.png") no-repeat;
}
.formtitle {
  width: 100%;
  height: 120px;
  line-height: 120px;
  color: #0bb2ff;
  font-size: 24px;
  text-align: center;
  padding-top: 20px;
}
.logoform p {
  display: block;
  width: 300px;
  text-align: right;
  color: #06bcff;
  margin: 20px auto;
}
.forminput {
  width: 300px;
  margin: 0 auto 40px auto;
  background-color: rgba(2, 105, 153, 0.5);
  background-repeat: no-repeat;
  background-position: 260px center;
  height: 45px;
  border-radius: 5px;
  line-height: 45px;
  position: relative;
}
.forminput input {
  display: block;
  width: 100%;
  height: 45px;
  outline: none;
  background: none;
  border: none;
  color: #040d11;
  padding: 0 40px 0 10px;

}

/* 解决自动填充用户名密码后input框样式改变问题 */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
     -webkit-transition-delay: 111111s;
     -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
 }


.formbtn {
  width: 295px;
  margin: 0 auto;
}
.loginBtn {
  display: inline-block;
  width: 100%;
  border-radius: 5px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}
.loginBtn:hover {
  background: #0f93ef;
}

.image .image-slot{
  background-color: rgba(7, 105, 151, 0.5);
  text-align: center;
}
.image{
  vertical-align:middle;
  padding: 0%;
  margin: 0%;
  width: 40%; height: 45px;
  background-color: rgba(2, 105, 153, 0.5);
}
</style>